<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
        <header>
            <nav class="b_clear">
                <div class="nav_logo l_float">
                    <img src="imgs/logo.svg" alt="">
                </div>
                <!--<div class="nav_link r_float">
                    <ul>
                        <li><a href="#">返回首页</a></li>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">联系我们</a></li>

                    </ul>
                </div>-->
            </nav>
        </header>
        <div class="container">
            <div class="login_body ">
                <div class="login_form ">
                    <div class="login_top">
                        <img src="imgs/logo_z.svg" alt="" class="">
                        
                        <div class="login_tags b_clear">
                            <span class="top_tag l_float active" onClick="PwdLogin()">密码登录</span>
                            <span class="top_tag r_float" onClick="QrcodeLogin()">扫码登录</span>
                        </div>
                    </div>
                    <div class="login_con">
                        <form action="/test" method="POST">
                            <div>
                                <label for="user_name">用户名</label>
                                <input type="text" name="name" id="user_name" placeholder="账号/手机号/邮箱">
                                <img src="imgs/icons/user.svg">
                                <p class="tips hidden">请检查您的账号</p>
                            </div>
                            <div>
                                <label for="user_pwd">密码</label>
                                <input type="password" name="password" id="user_pwd" placeholder="请输入账户密码">
                                <img src="imgs/icons/lock.svg">
                                <p class="tips hidden">请检查您的密码</p>
                            </div>
                            <div class="b_clear">
                                <label for="auth_code" class="b_clear">验证码</label>

                                <input type="text" name="checkcode" id="auth_code" placeholder="" class="l_float">
                                <span><img  id="checkcode" src="/valicode" onclick="changeCode()" class="l_float"  /></span>

                                <p class="tips hidden">验证码错误</p>
                                
                            </div>
                            <div class="b_clear submit">
                                
                                <button type="submit">登&nbsp;&nbsp;录</button>
                                <a href="#" class="r_float">忘记密码？</a>
                                <p class="tips hidden">登录失败，请检查您的账户与密码</p>
                            </div>
                        </form>   
                    </div>
                    <div class="login_con hidden">
                        <div class="qr_code">
                                <img src="imgs/qr.png" alt="">
                                <p>请使用微信扫码登录<br>仅支持已绑定微信的账户进行快速登录</p>
                        </div>
                        
                    </div>
                    <div class="login_otherAccount">
                        <span>第三方登录</span>
                        <a href="http://"><img src="imgs/icons/wechat.svg" alt="微信登录"></a>
                        <a href="http://"><img src="imgs/icons/weibo.svg" alt="微博登录"></a>
                        <a href=""><img src="imgs/icons/qq.svg" alt="QQ登录"></a>
                    </div>
                    
                </div>
                <!--使登录表单居中 不显示图片-->
               <!-- <div class="login_ad l_float" id="AdImg">
                    <a href="">查看详情</a>
                </div>-->
            </div>

        </div>

        <script src="js/login.js"></script>        
    </body>
    <script>
        /**
         * 点击获取随机生成的验证码
         */
        function changeCode() {
            $("#checkcode").attr('src', '/valicode?' + Math.floor(Math.random() * 100));
        }
    </script>
</html>

